<template>
  <Card style="width:350px" to="/button">
    <p slot="title">
      <Icon type="ios-film-outline"></Icon>
      <span>经典电影</span>
    </p>
    <a href="#" slot="extra" @click.prevent="changeLimit">
      <Icon type="ios-loop-strong"></Icon>
      换一换
    </a>
    <ul>
      <li v-for="item in movieList" :key="item.name">
        <a :href="item.url" target="_blank">{{ item.name }}</a>
        <span>
          <!--<Icon type="ios-star" v-for="n in 4"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>-->
          {{ item.rate }}
        </span>
      </li>
    </ul>
  </Card>
</template>
<script>
export default {
  data () {
    return {
      limitNum: 5,
      limitFrom: 0,
      movieList: [
        {
          name: '肖申克的救赎',
          url: 'https://movie.douban.com/subject/1292052/',
          rate: 9.6
        },
        {
          name: '这个杀手不太冷',
          url: 'https://movie.douban.com/subject/1295644/',
          rate: 9.4
        },
        {
          name: '霸王别姬',
          url: 'https://movie.douban.com/subject/1291546/',
          rate: 9.5
        },
        {
          name: '阿甘正传',
          url: 'https://movie.douban.com/subject/1292720/',
          rate: 9.4
        },
        {
          name: '美丽人生',
          url: 'https://movie.douban.com/subject/1292063/',
          rate: 9.5
        },
        {
          name: '千与千寻',
          url: 'https://movie.douban.com/subject/1291561/',
          rate: 9.2
        },
        {
          name: '辛德勒的名单',
          url: 'https://movie.douban.com/subject/1295124/',
          rate: 9.4
        },
        {
          name: '海上钢琴师',
          url: 'https://movie.douban.com/subject/1292001/',
          rate: 9.2
        },
        {
          name: '机器人总动员',
          url: 'https://movie.douban.com/subject/2131459/',
          rate: 9.3
        },
        {
          name: '盗梦空间',
          url: 'https://movie.douban.com/subject/3541415/',
          rate: 9.2
        }
      ]
    }
  },
  methods: {
    changeLimit () {
      this.limitFrom = this.limitFrom === 0 ? 5 : 0
    }
  }
}
</script>
